<template>
	<!-- <view class="content"> -->
	<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
		:dots-styles="dotsStyles" field="content">
		<swiper interval='2000' :autoplay="autoplay" class="swiper-box" @change="change" :current="swiperDotIndex"
			bottom="10px;right:10">
			<swiper-item v-for="(item, index) in props.images" :key="index">
				<view class="swiper-item" :class="'swiper-item' + index">
					<image :lazy-load="true" :style="swiperStyle" :src="item.img?base_static+item.img:base_static+item.url" />
					<!-- {{item.img?base_static+item.img:base_static+item.url}} -->
				</view>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
	<!-- </view> -->
</template>


<script setup>
	import {
		ref,
		reactive,
		defineProps,
		watch,
		defineEmits
	} from 'vue'

	import {
		onShow,
		onPageScroll
	} from "@dcloudio/uni-app"
	import {
		getSwiper
	} from "@/api/index.js"

	// 是否自动播放
	const autoplay = ref(true)
	// const images = ref([])
	// 给父组件传值
	const emits = defineEmits(['current'])



	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		},
		flag: {
			type: Boolean,
			default: true
		},
		images: {
			type: Array,
			default: () => []
		},
	})
	console.log(props, 'props')




	// 默认样式
	const swiperStyle = ref({})
	watch(() => props.flag, (newData) => {
		console.log(newData)
		// 显示模糊
		if (newData) {
			// 设置轮播图 停止自动切换
			autoplay.value = false
			// 将轮播图的图片 放大1.2倍
			swiperStyle.value.transform = "scale(1.2)"
			// 增加模糊的 毛玻璃的效果 
			swiperStyle.value.filter = "blur(2px)"
			// console.log(props.images, props)
			// 将当前停止的轮播图数据 回传给 父组件current
			emits('current', props.images[current.value])
		} else {
			autoplay.value = true
			swiperStyle.value.transform = "scale(1)"
			swiperStyle.value.filter = "blur(0px)"
			emits('current', {})
		}


	})

	// 调用接口获取数据
	onShow(() => {
		// console.log(props.images, 'props', props)
		// images.value = props.images.value
	})

	// 轮播图变化时
	function change(e) {
		// console.log(e.detail.current)

		current.value = e.detail.current
	}



	// 获取父组件图片列表,是否自动轮播
	// defineProps(['images'])



	const info = reactive([])
	const dotStyle = reactive([{
		backgroundColor: 'rgba(83, 200, 249,0.3)',
		border: '1px rgba(83, 200, 249,0.3) solid',
		color: '#fff',
		selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
		selectedBorder: '1px rgba(83, 200, 249,0.9) solid',
		bottom: "10px;right:10"
	}])

	const modeIndex = ref(1)
	const styleIndex = ref(0)
	const current = ref(0)
	const mode = reactive('default')
	var dotsStyles = reactive({
		backgroundColor: 'rgba(83, 200, 249,0.3)',
		border: '1px rgba(83, 200, 249,0.3) solid',
		color: '#fff',
		selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
		selectedBorder: '1px rgba(83, 200, 249,0.9) solid',
		bottom: '50px;left: 0'
	})
	const swiperDotIndex = ref(0)



	function clickItem(e) {
		swiperDotIndex.value = e
	}
</script>


<style lang="scss">
	// .content {
	// 	width: 100%;
	// 	height: 300px;
	// }

	.swiper-box {
		width: 100%;
		height: 300px;
		// position: fixed;
		// // /* #ifdef MP-WEIXIN */
		// top: 0;
		// /* #endif */
		// /* #ifdef H5 */
		// top: 44px;
		// /* #endif */
		z-index: 0;
	}

	.swiper-item {
		height: 100%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// height: 200px;
		color: #fff;
	}

	.swiper-item img,
	.swiper-item image {
		width: 100%;
		height: 300px;
		position: relative;
		z-index: 1;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 100%;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}

	.uni-swiper__dots-box {
		bottom: 30rpx;
		left: 0 !important;
		right: 5% !important;
		z-index: 8;
	}
</style>